<template>
	<view class="payment">
		<uni-nav-bar left-text="关闭" title="确认支付" :fixed="true" :statusBar="true" @clickLeft="goBack"></uni-nav-bar>
		<view class="pay-main">
			<radio-group @change="radioChange">
				<label>
					<view class="pay-item">
						<image class="pay-img" src="../../static/img/zfb.png" mode=""></image>
						<view>
							<view>支付宝支付</view>
							<view class="pay-text">推荐支付宝用户使用</view>
						</view>
						<radio value="alipay" :checked="mode == 'alipay'" color="#ff3333" />
					</view>
				</label>
				<label>
					<view class="pay-item">
						<image class="pay-img" src="../../static/img/wxf.png" mode=""></image>
						<view>
							<view>微信支付</view>
							<view class="pay-text">推荐微信用户使用</view>
						</view>
						<radio value="wxpay" :checked="mode == 'wxpay'" color="#ff3333" />
					</view>
				</label>
			</radio-group>
		</view>
		<!-- 去支付 -->
		<view class="pay-foot">
			<view class="total">
				<text class="f-color">合计</text>
				<text class="total-price">¥259.00</text>
			</view>
			<view class="go-price" @tap="goPayment">去支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'alipay'
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			goPayment() {
				// // #ifdef APP-PLUS
				// uni.requestPayment({
				// 	provider: this.mode,
				// 	"orderInfo": {
				// 		"appid": "wx4998188187c70e", // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
				// 		"noncestr": "c5sEwbaNPiXAF3iv848888", // 随机字符串
				// 		"package": "Sign=WXPay", // 固定值
				// 		"partnerid": "1485418152", // 微信支付商户号
				// 		"prepayid": "wx202254944484156488849fbe90000", // 统一下单订单号 
				// 		"timestamp": 159793529282418, // 时间戳（单位：秒）
				// 		"sign": "A842B45937F6EFF60DEC7A2EAA52D5A01815" // 签名，这里用的 MD5/RSA 签名
				// 	}
				// })
				// // #endif
				uni.navigateTo({
					url: "/pages/payment-success/payment-success"
				})
			},
			radioChange(e) {
				this.mode = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.payment {
		.pay-main {
			.pay-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: 2rpx solid #ccc;

				.pay-text {
					font-size: 24rpx;
					color: #ccc;
				}

				.pay-img {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.pay-foot {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.total {
				flex: 1;
				line-height: 100rpx;
				background-color: #000;
				padding-left: 100rpx;

				.total-price {
					color: #fff;
					margin-left: 10rpx;
				}
			}

			.go-price {
				line-height: 100rpx;
				text-align: center;
				width: 220rpx;
				color: #fff;
				background-color: #49bdfb;
			}
		}
	}
</style>
